<template>
  <div
    @click="select"
    :class="['contain-div', {'chess-shadow': !isBlank}, {'up': isUp}, {'chess-active': isActive}]"
  >
    <div v-if="isBlank" class="blank-div"></div>
    <el-popover
      v-else
      placement="right"
      title="技能名称"
      width="200"
      trigger="hover"
      :content="chessObj.skill"
      :disabled="!chessObj.skill"
    >
      <span
        slot="reference"
        :class="['chess', {'crimson': !this.chessObj.side}]"
      >{{ chessObj.name }}</span>
    </el-popover>
    <div v-if="showCircle" class="circle"></div>
  </div>
</template>

<script>
let effectTimeout = null;
export default {
  name: 'Chess',
  props: {
    // 棋子是否禁用-棋子变成仅展示
    disAble: {
      type: Boolean,
      default: false
    },
    // 棋子信息
    chessObj: {
      type: Object,
      default: () => {}
    },
    // 是否展示圆点
    showCircle: {
      type: Boolean,
      default: false
    },
    isUp: {
      type: Boolean,
      default: false
    },
    // 是否是空白
    isBlank: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    isActive() {
      if (this.chessObj && this.chessObj.skill && this.chessObj.skill.indexOf('(激活)') !== -1) {
        return true;
      }
      return false;
    }
  },
  beforeDestroy() {
    if (effectTimeout) {
      clearTimeout(effectTimeout);
    }
  },
  methods: {
    toActive() { // 激活特效3秒
      this.isActive = true;
      effectTimeout = setTimeout(() => {
        this.isActive = false;
      }, 3000);
    },
    select() {
      if (!this.disAble) {
        this.$emit('onChange', this.isBlank ? -1 : Number(this.isUp));
      }
    }
  }
};
</script>

<style scoped>
.contain-div {
  width: 100%;
  position: relative;
  height: 70px;
  width: 70px;
  -webkit-user-select: none;
  user-select: none;
}
.chess-shadow {
  box-shadow: 4px 4px 2px 0px rgba(0,0,0,0.5);
  border-radius: 50%;
  background-image: url('~@/assets/images/chess-bg.png');
  background-size: 100% 100%;
}
.up {
  left: -5px;
  top: -10px;
  box-shadow: 12px 12px 6px 0px rgba(0,0,0,0.5);
  border-radius: 50%;
}
.chess {
  font-family: founder-official-script;
  font-size: 55px;
  position: absolute;
  left: 7px;
  top: 3px;
  -webkit-user-select: none;
  user-select: none;
  z-index: 9;
}
.crimson {
  color: crimson;
}
.blank-div {
  height: 81px;
  width: 81px;
  position: relative;
}
.circle {
  width: 10px;
  height: 10px;
  background-color: #67C23A;
  opacity: 0.8;
  border-radius: 50%;
  position: absolute;
  left: 34px;
  top: 34px;
  z-index: 11;
}
.chess-active {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-animation: change 0.8s ease-in-out infinite alternate;
  -moz-animation: change 0.8s ease-in-out infinite alternate;
  animation: change 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes change {
  from {
    box-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #FFDD1B,
    0 0 35px #FFDD1B,
    0 0 40px #FFDD1B,
    0 0 50px #FFDD1B,
    0 0 75px #FFDD1B;
  }
  to {
    box-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 7px #fff,
    0 0 10px #FFDD1B,
    0 0 17px #FFDD1B,
    0 0 20px #FFDD1B,
    0 0 25px #FFDD1B,
    0 0 37px #FFDD1B;
  }
}
@-moz-keyframes change {
  from {
    box-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #FFDD1B,
    0 0 35px #FFDD1B,
    0 0 40px #FFDD1B,
    0 0 50px #FFDD1B,
    0 0 75px #FFDD1B;
  }
  to {
    box-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 7px #fff,
    0 0 10px #FFDD1B,
    0 0 17px #FFDD1B,
    0 0 20px #FFDD1B,
    0 0 25px #FFDD1B,
    0 0 37px #FFDD1B;
  }
}
@keyframes change {
  from {
    box-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff,
    0 0 20px #FFDD1B,
    0 0 35px #FFDD1B,
    0 0 40px #FFDD1B,
    0 0 50px #FFDD1B,
    0 0 75px #FFDD1B;
  }
  to {
    box-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 7px #fff,
    0 0 10px #FFDD1B,
    0 0 17px #FFDD1B,
    0 0 20px #FFDD1B,
    0 0 25px #FFDD1B,
    0 0 37px #FFDD1B;
  }
}
</style>
